<template>
  <div class="login_bc">
    <div class="logo-form">
      <div class="form-item login_input">
        <div class="shadow-c">
          <div class="left ipt-img">
            <img src="../../../static/image/e_2.png" alt="">
          </div>
          <div class="ipt-box">
            <input type="text" v-model="mobile" placeholder="请输入手机号"/>
          </div>
          <div class="clear"></div>
        </div>
      </div>
      <div class="form-item">
        <div @click="getCode" :class="hasSend? 'has-send' : ''" class="right shadow-c get-code">
          {{ codeText }}
        </div>
        <div class="shadow-c auth-code">
          <div class="left ipt-img">
            <img src="../../../static/image/e_8.png" alt="">
          </div>
          <div class="ipt-box">
            <input type="text" v-model="code" placeholder="请输入验证码"/>
          </div>
        </div>
        <div class="clear"></div>
      </div>
      <div class="form-item">
        <div class="left logo-way">
          <p @click="toPass">
            密码登录
          </p>
        </div>
        <div class="clear"></div>
      </div>
      <div @click="login" class="form-item logo-btn">
        登录
      </div>
      <div id="regit">
        <p class="right" @click="toReg">
          注册
        </p>
        <div class="clear"></div>
      </div>
    </div>
    <div class="parties">
      <div class="title">
        <div class="left line">
          <img src="../../../static/image/logo-line.png">
        </div>
        <div class="right line">
          <img src="../../../static/image/logo-line.png">
        </div>
        <div class="center">
          第三方登录
        </div>
        <div class="clear"></div>
      </div>
      <div class="choose-way">
        <ul>
          <li class="left">
            <a style="display: block" href="http://pxjkcfwwz.chenchaoweb.cn/index.php/Home/QQLogin/qq_login">
              <p>
                <img class="way-img" src="../../../static/image/e_5.png">
              </p>
              <p>
                QQ
              </p>
            </a>
          </li>
          <li class="left">
            <a style="display: block" href="">
              <p>
                <img class="way-img" src="../../../static/image/e_6.png">
              </p>
              <p>
                微信
              </p>
            </a>
          </li>
          <li class="left">
            <a style="display: block;color: #000" href="http://pxjkcfwwz.chenchaoweb.cn/index.php/Home/Weibo/index">
              <p>
                <img class="way-img" src="../../../static/image/e_7.png">
              </p>
              <p>
                微博
              </p>
            </a>
          </li>
          <div class="clear"></div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'LoginByPass',
    data () {
      return {
        mobile: '',
        code: '',
        codeText: '获取验证码',
        hasSend: false
      }
    },
    methods: {
      // 跳到注册、验证码登录、找回密码
      toReg: function () {
        this.$router.push('/Login/LoginReg')
      },
      toPass: function () {
        this.$router.push('/Login/LoginByPass')
      },
      // 获取验证码
      getCode: function () {
        let that = this
        let mobile = that.mobile
        if (mobile === '') {
          that.$vux.toast.show({
            text: '请输入手机号码',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (!that.isMobile(mobile)) {
          that.$vux.toast.show({
            text: '手机号有误',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (that.hasSend) {
          return false
        }
        that.$chaos.ajax({
          url: '/Index/sendLoginCode',
          loading: '发送中...',
          data: {
            mobile: mobile
          },
          callback: function (type, res) {
            if (type === 'success') {
              that.codeText = '60s后重发'
              that.hasSend = true
              let timer = 60
              let text = 's后重发'
              let intval = setInterval(function () {
                timer--
                if (timer <= 0) {
                  that.codeText = '重新发送'
                  that.hasSend = false
                  clearInterval(intval)
                } else {
                  if (timer < 10) {
                    that.codeText = '0' + timer + text
                  } else {
                    that.codeText = timer + text
                  }
                }
              }, 1000)
            }
          }
        })
      },
      // 验证码登录
      login: function () {
        let that = this
        let mobile = that.mobile
        let code = that.code
        if (mobile === '') {
          that.$vux.toast.show({
            text: '请输入手机号码',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (!that.isMobile(mobile)) {
          that.$vux.toast.show({
            text: '手机号有误',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (code === '') {
          that.$vux.toast.show({
            text: '请输入验证码',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        that.$chaos.ajax({
          url: '/Index/mobileLogin',
          data: {
            mobile: mobile,
            code: code
          },
          callback: function (type, res) {
            if (type === 'success') {
              that.$chaos.setAccessToken(res.result.access_token)
              if (res.result.login_status === '是') {
                that.$router.push('/Personal/PersonalEditor?froml=true')
              } else {
                that.$router.push('/?froml=true')
              }
            }
          }
        })
      }
    },
    created () {
      this.$emit('changeTitle', '登录')
    }
  }
</script>

<style scoped>

</style>
